<script lang="ts" setup>
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { getbxjkxllmList, getsqbxjkList, getsxrbList } from '~/api/home'

const title = ref('书籍展示')
const routePath = [{ name: '首页', path: '/' }, { name: title.value, path: '/peopleHealth/peopleHealthSeries' }, { name: '书籍详情', path: '' }]
const route = useRoute()
const router = useRouter()
const fileType = ref()
// book.value = decode(route.query.data)
// interface Book{
//     bookName: '长安县志',
//     publisherUnit: '长安县志编委会',
//     author: '长安县志编委会',
//     publishDate: '2021-01-01',
//     dataSource: '长安县志',
//     readNum: 1000,
//     url: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
//     resume: '长安县志是一部以县志为主线的历史文献综合编纂，是我省历史文献的重要组成部分。'
// }
// console.log(book.value)
const id = route.params.id
fileType.value = route.query.type
// fileType.value = route.params.id
const { collectArticleMap } = storeToRefs(useUserStore())

const detail = ref({})
async function getDetail() {
  const req = {
    condition: [{
      colName: 'id',
      ruleType: 'eq',
      value: id,
    }],
  }
  let res
  switch (fileType.value) {
    case '长安县志':
      res = await getsxrbList(req)
      break
    case '西安市志':
      res = await getsqbxjkList(req)
      break
    case '西安年鉴':
      res = await getbxjkxllmList(req)
      break
  }
  if (Array.isArray(res.data) && res.data.length) {
    detail.value = res.data[0]
    return res.data[0]
  }
}
await getDetail()
const book = computed(() => {
  let result = {}
  if (fileType.value === '长安县志') {
    result = {
      bookName: detail.value?.title_name,
      publisherUnit: detail.value?.publisher,
      author: detail.value?.author,
      publishDate: detail.value?.publisher_time,
      dataSource: detail.value?.source,
      readNum: detail.value?.read_num,
      url: detail.value?.cover_file_name,
      resume: detail.value?.brief,
      uid: detail.value?.uid,
    }
  }
  if (fileType.value === '西安市志') {
    result = {
      bookName: detail.value?.title_name,
      publisherUnit: detail.value?.organ_name,
      author: detail.value?.author,
      publishDate: detail.value?.release_time,
      dataSource: detail.value?.origin,
      readNum: detail.value?.page_view_num,
      url: detail.value?.cover_file_name,
      resume: detail.value?.digest,
      uid: detail.value?.uid,
    }
  }
  if (fileType.value === '西安年鉴') {
    result = {
      bookName: detail.value?.title_name,
      publisherUnit: detail.value?.organ_name,
      author: detail.value?.create_user,
      publishDate: detail.value?.release_time,
      dataSource: detail.value?.origin,
      readNum: detail.value?.page_view_num,
      url: detail.value?.img_url,
      resume: detail.value?.digest,
      uid: detail.value?.uid,
    }
  }
  return result
})
</script>

<template>
  <div class="py-5%">
    <ClientOnly>
      <CommonPageContainer :title="title" :path="routePath">
        <div class="px-5">
          <div class="min-h-600px rounded-2xl bg-#F7F4EF px-6.5 py-5">
            <div
              class="float-left ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md"
              style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);"
              @click="router.back()"
            >
              <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
              </div>
            </div>
            <div class="my-2 text-1.2rem text-#AC8358 font-700 line-height-8">
              {{ book?.bookName ?? '暂无数据' }}
            </div>
            <div class="my-4">
              <span class="mr-6">发布日期：{{ book?.publishDate ?? '暂无数据' }}</span>
              <span class="mx-6">信息来源：{{ book?.dataSource ?? '暂无数据' }}</span>
              <span class="mx-6">阅读量：{{ book?.readNum ?? '暂无数据' }}</span>
            </div>
            <div grid="~  gap-10 cols-2" class="min-h-500px py-5">
              <el-image
                style="width: 100%; height: 100%;" class="max-h-500px" :src="getImgUrl(book?.url)"
                :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                :preview-src-list="[getImgUrl(book?.url)]" :initial-index="4" fit="fill"
              >
                <template #error>
                  <div class="image-slot">
                    <el-icon><IconPicture /></el-icon>
                  </div>
                </template>
              </el-image>
              <div>
                <div class="text-#AC8358">
                  <i class="i-ri:album-line m-r-15px h-10px w-10px" />书籍基本信息
                </div>
                <table class="my-10 w-full table-auto" border="1 dashed black">
                  <tbody>
                    <tr class="h-50px">
                      <th class="w-100px">
                        作者
                      </th>
                      <th>{{ book?.author ?? '暂无数据' }}</th>
                    </tr>
                    <tr class="h-50px">
                      <th>出版发行</th>
                      <th>{{ book?.publisherUnit ?? '暂无数据' }}</th>
                    </tr>
                    <tr class="h-270px">
                      <th>摘要</th>
                      <th>{{ book?.resume ?? '暂无数据' }}</th>
                    </tr>
                  </tbody>
                </table>
                <div flex="~" class="buts">
                  <NuxtLink :to="`/book/read/${detail.id}`" class="mx-15px b-none bg-[linear-gradient(220.55deg,_#d3c3a1_0%,_#ddac44_100%)] px-15px py-10px text-#fff">
                    在线阅读
                  </NuxtLink>
                  <!-- <button @click="toDetail()">
                    在线阅读
                  </button> -->
                  <div
                    class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                    @click="changeArticleCollect(book.uid)"
                  >
                    <!-- <img class="pr-12px" src="/img/black_heart.png" alt=""> -->
                    <i
                      class="i-ri:heart-2-line mr-12px inline-block text-20px text-#AC8358"
                      :class="{ 'text-red': collectArticleMap[book.uid], 'text-#555': !collectArticleMap[book.uid] }"
                    />
                    <span>{{ collectArticleMap?.[book.uid] ? '已收藏' : '收藏' }}</span>
                  </div>
                  <div
                    class="h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                    @click="copyUrl"
                  >
                    <i class="i-ri:reply-line m-r-5px h-20px w-20px text-#AC8358" />
                    分享
                  </div>
                  <button>
                    <i class="i-ri:folder-download-line m-r-5px h-20px w-20px text-#AC8358" /><span class="text-black">下载</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </CommonPageContainer>
    </ClientOnly>
  </div>
</template>

<style lang="scss" scoped>
.image-slot {
  height: 100%;
}

th,
td {
  border: 1px dashed rgb(223, 189, 18);
  font-weight: 100;
}

.buts {
  & button {
    padding: 10px 15px;
    margin: 0 15px;
    color: #ddac44;
    background-color: #fff;
    border-radius: 4px;
  }

  button:nth-child(1) {
    background: linear-gradient(220.55deg, #d3c3a1 0%, #ddac44 100%);
    color: #fff;
    border: none;
  }
}
</style>
